<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar title="标题" left-text="返回" left-arrow>
      <template #left>
        <span class="iconfont iconnew icon-left"></span>
      </template>
      <template #title>
        <div class="search">
          <van-icon name="search" size="18" />
          <span>搜索商品</span>
        </div>
      </template>
      <template #right>
        <!-- <van-icon name="manager-o" /> -->
        <van-icon
          name="manager-o"
          size="20"
          @click="$router.push('/personal')"
        />
      </template>
    </van-nav-bar>
    <!-- 导航 -->
    <div class="nav_bar">
      <van-tabs>
        <van-tab v-for="item in categoryList" :title="item.name" :key="item.id">
          <!-- 内容 {{ index }} -->
          <div class="navBarindex">
            <van-pull-refresh
              v-model="isLoading"
              success-text="刷新成功"
              @refresh="onRefresh"
              ><!--下拉刷新-->
              <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
                :immediate-check="false"
                ><!--上拉加载中-->
                <newItems
                  @click.native="toPage(item.id)"
                  v-for="item in news"
                  :key="item.id"
                  :obj="item"
                ></newItems
                ><!--新闻列表显示-->
              </van-list>
            </van-pull-refresh>
            <!-- 增加部分 -->
          </div>
        </van-tab>
        <div slot="nav-right" class="zhanwei"></div>
      </van-tabs>

      <div class="right_icon">
        <van-icon name="plus" color="#000" size="22"></van-icon>
      </div>
    </div>
  </div>
</template>


<script>
import newItems from "../components/newItems.vue";
import { cotegory } from "../api/common";
import { getNews } from "../api/news";
export default {
  data() {
    return {
      categoryList: [],
      news: [],
      curIndex: 1, //默认新闻数据id
      isLoading: false, //下拉刷新组件控制变量
      loading: false, //上拉加载中
      finished: false, //加载完所有数据
      pageIndex: 1,
      pageSize: 10,
    };
  },
  components: {
    newItems,
  },
  created() {
    cotegory().then((res) => {
      console.log(res);
      this.categoryList = res.data.data;
      //   必须先获取到栏目id，才能调用获取的文章列表的接口
      //因为这个接口用到了栏目id
      // 首页默认显示头条的行文，因为·获取到默认新闻的时候，有可能用户还没有登录
      //   getNews({
      //     category: this.categoryList[this.curIndex].id,
      //   }).then((res) => {
      //     this.news = res.data.data;
      //     console.log(54, res);
      //   });
      this.getNewsList();
    });
  },
  methods: {
    //   下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoading = false;
        // 重置数据
        this.news = [];
        this.pageIndex = 1;
        this.finished = false;
        // this.count++;
        this.getNewsList();
      }, 1000);
    },
    // 请求数据的封装
    getNewsList() {
      getNews({
        category: this.categoryList[this.curIndex].id,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
      }).then((res) => {
        // this.news = res.data.data;
        this.isLoading = false;
        console.log(54, res);
        this.news = [...this.news, ...res.data.data];
        // // 防止用户选中某个栏目的时候，然后跳转频道管理页面进行删除频道报错问题
        if (this.curIndex > this.categoryList.length - 1) {
          this.curIndex = this.categoryList.length - 1;
        }
        this.isLoading = false;
        this.loading = false;
        if (res.data.data.length < this.pageSize) {
          this.finished = true;
        }
      });
    },
    // 上拉加载
    onLoad() {
      if (this.news.length == 0) {
        return;
      }

      //防止下拉刷新的时候，触发onload函数
      //上拉加载
      console.log(1212);
      this.pageIndex++;
      this.getNewsList();
    },
    // 页面跳转
    toPage(id) {
      this.$router.push({
        path: "/articleDetail",
        query: {
          //向子组件传递的数据
          id: id,
        },
      });
    },
  },
};
</script>


<style lang="less" scoped>
.van-nav-bar {
  background-color: red;
  .icon-left {
    font-size: 50px;
    color: #fff;
  }
  .van-icon {
    color: #fff;
  }
  /deep/.van-nav-bar__title {
    width: 60%;
    .search {
      height: 36px;
      line-height: 36px;
      color: #fff;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.3);
    }
  }
}
.van-tabs {
  position: relative;
}
.nav_bar {
  position: relative;
  .zhanwei {
    width: 44px;
    flex-shrink: 0; //flsex的收缩
  }
  .right_icon {
    position: absolute;
    // display: flex;
    top: 0;
    right: 0;
    width: 33px;
    height: 44px;
    text-align: center;
    line-height: 44px;
    // justify-content: center;
    // align-items: center;
    background-color: green;
    // opacity: 0.5;
  }
}
.navBarindex {
  position: fixed;
  left: 0;
  right: 0;
  top: 90px;
  bottom: 0;
  overflow-y: auto;
}
</style>